<template>
  <div class="device">
    <div class="common-table">
      <el-table :data="data" stripe style="width: 100%" height="100%" fit>
        <el-table-column label="设备ID">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.deviceId" placement="top">
              <div class="text-ellipsis-one">{{ scope.row.deviceId }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="faultTime" label="故障时间"> </el-table-column>
        <el-table-column prop="faultInfo" label="故障信息"> </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pager">
      <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      total: 0,
    };
  },
  methods: {
    currentChange() {},
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.device {
  height: 100%;
  .common-table {
    height: 90%;
  }
  .pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    box-sizing: border-box;
  }
}
</style>
